import React from 'react';
import { motion } from 'motion/react';
import { Card, CardContent, CardHeader } from '../../components/ui/card';
import { Badge } from '../../components/ui/badge';
import { Button } from '../../components/ui/button';
import { Clock, MapPin, User, CheckCircle } from 'lucide-react';

interface MedicalCardProps {
  type: 'department' | 'record';
  title: string;
  subtitle?: string;
  icon?: React.ReactNode;
  matchScore?: number;
  waitTime?: string;
  description?: string;
  status?: 'pending' | 'confirmed' | 'completed';
  onAction?: () => void;
  actionLabel?: string;
  className?: string;
}

export function MedicalCard({
  type,
  title,
  subtitle,
  icon,
  matchScore,
  waitTime,
  description,
  status = 'pending',
  onAction,
  actionLabel,
  className = ''
}: MedicalCardProps) {
  const isDepartment = type === 'department';

  const getStatusColor = () => {
    switch (status) {
      case 'confirmed':
        return 'bg-green-100 text-green-800';
      case 'completed':
        return 'bg-blue-100 text-blue-800';
      default:
        return 'bg-gray-100 text-gray-600';
    }
  };

  const getStatusIcon = () => {
    switch (status) {
      case 'confirmed':
      case 'completed':
        return <CheckCircle className="w-4 h-4" />;
      default:
        return <Clock className="w-4 h-4" />;
    }
  };

  return (
    <motion.div
      className={className}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      whileHover={{ y: -2, scale: 1.02 }}
      transition={{ duration: 0.3 }}
    >
      <Card className="h-full border-2 border-gray-100 hover:border-blue-200 hover:shadow-lg transition-all duration-300 overflow-hidden">
        {/* 渐变背景装饰 */}
        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-green-500" />
        
        <CardHeader className="pb-3">
          <div className="flex items-start justify-between">
            <div className="flex items-center space-x-3">
              {icon && (
                <div className="p-2 rounded-lg bg-blue-50 text-blue-600">
                  {icon}
                </div>
              )}
              <div>
                <h3 className="font-semibold text-gray-900">{title}</h3>
                {subtitle && (
                  <p className="text-sm text-gray-600 mt-1">{subtitle}</p>
                )}
              </div>
            </div>

            {matchScore && (
              <Badge 
                variant="secondary" 
                className="bg-green-100 text-green-800 hover:bg-green-100"
              >
                匹配度 {matchScore}%
              </Badge>
            )}
          </div>
        </CardHeader>

        <CardContent className="pt-0">
          {description && (
            <p className="text-gray-600 text-sm mb-4 leading-relaxed">
              {description}
            </p>
          )}

          {/* 科室卡片信息 */}
          {isDepartment && (
            <div className="space-y-3">
              {waitTime && (
                <div className="flex items-center space-x-2 text-sm text-gray-600">
                  <Clock className="w-4 h-4" />
                  <span>当前排队：{waitTime}</span>
                </div>
              )}
              
              <div className="flex items-center space-x-2 text-sm text-gray-600">
                <MapPin className="w-4 h-4" />
                <span>门诊大楼 3楼</span>
              </div>
            </div>
          )}

          {/* 病历卡片信息 */}
          {!isDepartment && (
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                {getStatusIcon()}
                <span className={`text-xs px-2 py-1 rounded-full ${getStatusColor()}`}>
                  {status === 'confirmed' ? '医生已确认' : 
                   status === 'completed' ? '已完成' : '待医生校对'}
                </span>
              </div>
              
              <div className="flex items-center space-x-1 text-xs text-gray-500">
                <User className="w-3 h-3" />
                <span>张医生</span>
              </div>
            </div>
          )}

          {/* 操作按钮 */}
          {onAction && actionLabel && (
            <Button 
              onClick={onAction}
              className="w-full mt-4 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white border-none shadow-sm"
              size="sm"
            >
              {actionLabel}
            </Button>
          )}
        </CardContent>

        {/* 医疗十字背景纹理 */}
        <div className="absolute top-4 right-4 opacity-5 pointer-events-none">
          <svg width="32" height="32" viewBox="0 0 24 24" className="text-blue-500">
            <path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
          </svg>
        </div>
      </Card>
    </motion.div>
  );
}